<template>
  <div class="app-container">
    <div style="padding: 20px 20px 0 20px">
      授权角色：{{ $route.query.roleName }}
    </div>
    <el-tree
      style="margin: 20px 0"
      ref="tree"
      :data="sysMenuList"
      node-key="id"
      show-checkbox
      default-expand-all
      :props="defaultProps"
    />
    <div style="padding: 20px 20px">
      <el-button
        type="primary"
        icon="el-icon-check"
        size="mini"
        @click="save"
        >保存</el-button
      >
      <el-button
        @click="$router.push('/system/sysRole')"
        size="mini"
        icon="el-icon-refresh-right"
        >返回</el-button
      >
    </div>
  </div>
</template>
<script>
import api from "@/api/system/sysMenu";
export default {
  name: "roleAuth",

  data() {
    return {
      sysMenuList: [], // 所有菜单
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },

  created() {
    this.fetchData();
  },

  methods: {
    
    fetchData() {
      const roleId = this.$route.query.id;
      api.toAssign(roleId).then((res) => {
        const sysMenuList = res.data;
        this.sysMenuList = sysMenuList;
        const checkedIds = this.getCheckedIds(sysMenuList);
        console.log("getPermissions() checkedIds", checkedIds);
        this.$refs.tree.setCheckedKeys(checkedIds);
      });
    },

    /*
      得到所有选中的id列表
      */
    getCheckedIds(auths, initArr = []) {
      return auths.reduce((pre, item) => {
      
        if (item.select && !item.children) {
          pre.push(item.id);
        } else if (item.children) {
          this.getCheckedIds(item.children, initArr);
        }
        return pre;
      }, initArr);
    },

    /*
      保存权限列表
      */
    save() {
      //获取到当前子节点
      //const checkedNodes = this.$refs.tree.getCheckedNodes()
      //获取到当前子节点及父节点
      const allCheckedNodes = this.$refs.tree.getCheckedNodes(false, true);
      let idList = allCheckedNodes.map((node) => node.id);
      console.log(idList);
      let assginMenuVo = {
        roleId: this.$route.query.id,
        menuIdList: idList,
      };
      api.doAssign(assginMenuVo).then((res) => {
        this.$message.success(res.$message || "分配权限成功");
        this.$router.push("/system/sysRole");
      });
    },
  },
};
</script>